<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/sx.css.css">
    <link rel="stylesheet" href="./css/ltem-Details.css">
    <script src="./api/jquery.js"></script>
    <script src="./api/axios.js"></script>
</head>
<body>  
      <div class="tu">
          <img src="./img/i.jpg" alt="">
      </div>
       <nav>
           <div class="box">
                   <div>
              <p>所有产品分类</p>
              <p>首页</p>
              <p>|</p>
              <p>企业采购</p>
          </div>
         <div>
             <p>￥0.00元</p>
         </div>
           </div>
      
        </nav>
    <header class="contai" id="maF">
        <!-- <div class="magnifier" >
            <div id="box">
                <div id="box1">
                    <img src="../作业/作业/img/1.jpg" alt="">
                    <div id="fdj"></div>
        
                </div>
                <div id="box2">
                    <img src="../作业/作业/img/1.jpg" alt="">
                </div>
            </div>
            <div id="smallArea">
                <img src="../作业/作业/img/10.jpg" />
                <img src="../作业/作业/img/11.jpg" />
              </div>
          
        </div>
        <div class="Details" id="datail">
            <div class="product-name">
                <p>飞科电动刮胡刀</p>
                <p>全身水洗 &nbsp;1小时快充</p>
            </div>
            <div class="commodity-price">
                <p>此商品正在参加聚划算</p>
                <p>
                    <span>价格</span>
                    <span>￥129.00</span>
                </p>
            </div>
            <div class="transportation">
                <p>
                    <span style="color:#25252595;margin-left: 10px;">运费</span>
                    <span style="margin-left: 30px;">湖北武汉至郑州√中原区√包邮配送规则包邮配送规则
                    </span>
                </p>
                <p>
                    <span  style="color:#25252595;margin-left: 10px;">重量</span>
                    <span style="margin-left: 30px;">0.36kg</span>
                </p>
            </div>
            <div class="sales">
                <p>
                    <span>月销量 <b>900+</b> </span>
                    <span>|</span>
                    <span>送天猫积分 <i>12</i></span>
                </p>
            </div>
            <div class="quantity">
                <div>
                      <span>颜色分类</span>
                   <span>数量</span>
                   <span>服务</span>
                </div>
                  
              
                <div>
                    <p>
                        <img src="" alt="">
                    </p>
                    <p>
                        <span><input type="text" value="1"></span>
                        <span id="ospan">
                            <input type="button" value="↑">
                            <input type="button" value="↓">
                        </span>
                        <span>件&nbsp;有货</span>
                    </p>
                    <p>
                        <span>全面保修二年</span>
                        <span>延长保修一年</span>
                        <span>意外保修二年</span>
                    </p>
                </div>
                   

                    
            
                
            </div>
            <div class="shopping-cart">
                <p>加入购物车</p>
                <p>进入购物车</p>
            </div>
        </div> -->
    </header>
    <footer>
        <img src="./img/g.jpg" alt="">
    </footer>
</body>
<script>
    let maF=document.getElementById('maF')
    let datail=document.getElementById('datail')
    let scr=''
    let id = window.location.href.split('id=')[1]
    let detailsUrl = 'http://jx.xuzhixiang.top/ap/api/detail.php?id=' + id
    $.ajax({
        url:detailsUrl,
        type:'get',
        success:(res)=>{
           let data=res.data;
           console.log(data)
          scr+=`
         
        <div class="magnifier" id="maF">
            <div id="box">
                <div id="box1">
                    <img src="${data.pimg}" alt="">
                    <div id="fdj"></div>
        
                </div>
                <div id="box2">
                    <img src="${data.pimg}" alt="">
                </div>
            </div>
            <div id="smallArea">
                <img src="${data.pimg}" />
               
              </div>
          
        </div>
        <div class="Details" id="datail">
            <div class="product-name">
                <p>${data.pname}</p>
                <p>${data.pdesc}</p>
            </div>
            <div class="commodity-price">
                <p>此商品正在参加聚划算</p>
                <p>
                    <span>价格</span>
                    <span>${'￥'+ data.pprice}</span>
                </p>
            </div>
            <div class="transportation">
                <p>
                    <span style="color:#25252595;margin-left: 10px;">运费</span>
                    <span style="margin-left: 30px;">湖北武汉至郑州√中原区√包邮配送规则包邮配送规则
                    </span>
                </p>
                <p>
                    <span  style="color:#25252595;margin-left: 10px;">重量</span>
                    <span style="margin-left: 30px;">0.36kg</span>
                </p>
            </div>
            <div class="sales">
                <p>
                    <span>月销量 <b>900+</b> </span>
                    <span>|</span>
                    <span>送天猫积分 <i>12</i></span>
                </p>
            </div>
            <div class="quantity">
                <div>
                      <span>颜色分类</span>
                   <span>数量</span>
                   <span>服务</span>
                </div>
                  
              
                <div>
                    <p>
                        <img src="" alt="">
                    </p>
                    <p>
                        <span><input type="text" value="1" id='tex'></span>
                        <span id="ospan">
                            <input type="button" value="↑" id="jia">
                            <input type="button" value="↓" id="jian">
                        </span>
                        <span>件&nbsp;有货</span>
                    </p>
                    <p>
                        <span>全面保修二年</span>
                        <span>延长保修一年</span>
                        <span>意外保修二年</span>
                    </p>
                </div>
                   

                    
            
                
            </div>
            <div class="shopping-cart">
                <p id='bnt'>加入购物车</p>
                <p id="bot">进入购物车</P>
            </div>
        </div>
    </header>
          `
          maF.innerHTML=scr
          function qu(id) {
        return document.getElementById(id)
    }
    class Zox {
        constructor() {
            this.box = qu('box');
            this.box1 = qu('box1');
            this.Img = this.box1.children[0];
            this.fdj = qu('fdj');
            this.box2 = qu('box2');
            this.Img1 = this.box2.children[0];
            this.smallArea = qu("smallArea");
            this.smallImg = this.smallArea.children;

            this.move()
        }
        move() {
            this.box1.onmouseover = () => {
                this.fdj.style.display = "block";
                this.box2.style.display = "block";
                this.w = this.box1.offsetWidth - this.fdj.offsetWidth
                this.h = this.box1.offsetHeight - this.fdj.offsetHeight

            }
            this.box1.onmouseout = () => {
                this.fdj.style.display = 'none'
                this.box2.style.display = 'none'
            }
            this.box1.onmousemove = (e) => {
                let evt = e || event
                let l = evt.pageX - this.box.offsetLeft - this.fdj.offsetWidth / 2
                let t = evt.pageY - this.box.offsetTop - this.fdj.offsetHeight / 2
                l = l <= 0 ? 0 : l >= this.w ? this.w : l;
                t = t <= 0 ? 0 : t >= this.h ? this.h : t
                this.fdj.style.left = l + 'px'
                this.fdj.style.top = t + 'px'
                this.Img1.style.left =
                 (- l * this.box1.offsetWidth ) / this.fdj.offsetWidth + "px"
                this.Img1.style.top =
                  (- t * this.box1.offsetHeight) / this.fdj.offsetHeight + "px"
            }
    
            for (let i = 0; i < this.smallImg.length; i++) {
      
      this.smallImg[i].onclick = () => {
        this.Img1.src = this.Img.src = this.smallImg[i].src;
      };
        }

    }
}
    new Zox();
    let tex=document.getElementById('tex')
    let jia=document.getElementById('jia')
    let jian=document.getElementById('jian')
    let bnt=document.getElementById('bnt')
    let bot=document.getElementById('bot')
    jia.onclick=function(){
        tex.value++
    }
    jian.onclick=function(){
        tex.value--
        if(tex.value <= 1){
            tex.value=1
        }
    }
    bot.onclick=function(){
        location.href='shopping-cart.html'
    }
     bnt.onclick=function(){
        axios.get('http://jx.xuzhixiang.top/ap/api/add-product.php',{
             params:{
                 uid:data.uid,
                 pid:id,
                 pnum:tex.value
             }
         }).then(res=>{
                 console.log(res)
                 
             })
       
     }
        }
    }) 
    
</script>
</html>